<template>
  <div>
    <a-dropdown v-if="systemAreaType" :trigger="!hover ? undefined : ['click']">
      <span class="ant-dropdown-link">
        <slot></slot>
        <!-- 
        <a-button>
        设置{{ systemAreaType.type_name }} <a-icon type="down" />
        </a-button> 
        -->
      </span>

      <a-menu slot="overlay" @click="handleChange">
        <a-menu-item
          v-for="element in treeData"
          :key="
            systemAreaType.data_type == 0
              ? element.area_code
              : systemAreaType.data_value_type == 1
              ? element.data_value * 1
              : element.data_value
          "
        >
          <app-show :code="code" :value="element.area_code" />
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script>
import systemAreaType from "@/api/systemAreaType"
export default {
  props: {
    hover: {
      type: Boolean,
      default: false,
    },
    code: {
      type: [String, Number],
      default: () => {
        return null
      },
    },
    extData: {
      // 父元素传递的数据， 原封不动 回调
      type: [Number, String, Array, Object],
      default: null,
    },
  },
  data() {
    return {
      systemAreaType: undefined,
      treeData: undefined,
      mapData: undefined,
      selectValue2Obj: {},
    }
  },
  watch: {
    code() {
      this.getSystemArea()
    },
  },
  mounted() {
    this.getSystemArea()
  },
  methods: {
    async getSystemArea() {
      if (!this.code) {
        return
      }
      systemAreaType.cache(this.code).then((response) => {
        if (response.code !== 1 || !response.data) {
          return
        }
        this.systemAreaType = response.data.data_type
        this.treeData = response.data.data_menu
        this.mapData = response.data.data_map

        for (var index in this.treeData) {
          var tmpData = this.treeData[index]
          if (this.systemAreaType.data_type == 0) {
            this.selectValue2Obj[tmpData["area_code"]] = tmpData
          } else {
            this.selectValue2Obj[tmpData["data_value"]] = tmpData
          }
        }
      })
    },
    handleChange(e) {
      this.$emit("change", e.key, this.selectValue2Obj[e.key], this.extData)
    },
  },
}
</script>

<style lang="less" type="text/less" scoped></style>
